<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 9;
            border: none;
            outline: none;
            text-decoration: none;
            list-style: none;
            appearance: none;
            -webkit-appearance: none;
        }

        #app {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #000000c7;
            transition: 500ms;
        }

        .closewin {
            position: absolute;
            top: 30px;
            right: 20px;
            padding: 5px 10px;
            color: white;
            cursor: pointer;
            border-radius: 50%;
            background-color: rgba(120, 120, 120, 0.5);
        }

        .diskinfoshow {
            position: absolute;
            top: 90px;
            right: 20px;
            color: white;
        }

        .iconwrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 100%;
            background-color: #494949;
            overflow: hidden;
        }

        .iconwrap:after {
            content: "";
            position: absolute;
            top: 0;
            left: 80px;
            width: 80px;
            height: 100%;
            box-shadow: 0 0 10px 0 #000;
        }

        .iconwrapin {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden auto;
            scrollbar-width: 0;
        }

        .iconwrapin::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 0px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }

        .iconwrapin::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            background: #c1e2ff;
        }

        .iconwrapin::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            border-radius: 10px;
            background: #fafafa;
        }

        .iconwrapitem {
            margin: 10px 10px 0;
            width: 55px;
            height: 55px;
            border-radius: 10px;
            background-color: #fff;
            overflow: hidden;
        }

        .righttoptime {
            position: absolute;
            left: 100px;
            bottom: 20px;
            width: 300px;
            color: white;
        }

        .clockbase {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -21px;
            margin-top: -101px;
            width: 100px;
            height: 100px;
            border: 1px solid #fff;
            border-radius: 50%;
        }

        .clocklinebase,
        .clocklinebase-hours,
        .clocklinebase-min,
        .clocklinebase-sec,
        .clockoutline {
            position: absolute;
            top: 50%;
            left: 50%;
        }

        .clockoutline {
            top: 0;
            bottom: 50%;
        }

        .clocklinebase-hours:after,
        .clocklinebase-min:after,
        .clocklinebase-sec:after,
        .clockoutline:after,
        .clockoutline-active:after {
            content: '';
            position: absolute;
            top: -30px;
            left: -3px;
            height: 30px;
            width: 6px;
            background-color: white;
        }

        .clocklinebase-min:after {
            left: -2px;
            top: -35px;
            width: 4px;
            height: 35px;
        }

        .clocklinebase-sec:after,
        .clockoutline:after,
        .clockoutline-active:after {
            left: -1px;
            top: -40px;
            width: 2px;
            height: 40px;
        }

        .clockoutline:after,
        .clockoutline-active:after {
            top: auto;
            bottom: 60px;
            height: 50px;
            transition: 400ms;
        }

        .clockoutline-active:after {
            height: 80px;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="closewin" @click="closeapp">×</div>
        <div class="diskinfoshow">
            <div v-for="v in diskinfo" style="margin-bottom: 10px;">
                {{v.name}} 已使用: {{v.percentNum}}%<br>{{v.percent}}
            </div>
        </div>
        <div class="iconwrap">
            <div class="iconwrapin" scrollwrap>
                <div style="padding-bottom: 10px;">
                    <div class="iconwrapitem" v-for="v in arr">
                        <img :src="v.ico" style="width: 100%;height: 100%;cursor: pointer;transform: scale(.8);"
                            @click="toweb(v.link)">
                    </div>
                </div>
            </div>
        </div>
        <!-- 透明区域部分 -->
        <div class="righttoptime">
            <div style="font-size: 50px;">
                <span>{{times[0]}}</span>:<span>{{times[1]}}</span>:<span>{{times[2]}}</span><br>
            </div>
            {{times[3]}}-{{times[4]}}-{{times[5]}} {{times[6]}}
        </div>
        <div class="clockbase">
            <div class="clocklinebase">
                <div class="clocklinebase-hours" :style="{transform:'rotateZ('+hourdeg+'deg)'}"></div>
                <div class="clocklinebase-min" :style="{transform:'rotateZ('+mindeg+'deg)'}"></div>
                <div class="clocklinebase-sec" :style="{transform:'rotateZ('+secdeg+'deg)'}"></div>
                <!--  -->
                <div class="clockoutline" :class="{'clockoutline-active':i==(times[2])}"
                    :style="{transform:'rotateZ('+(i*6)+'deg)'}" v-for="(v,i) in 60"></div>
            </div>
        </div>
    </div>
    <script src="./vue3.js"></script>
    <script>
        var app = Vue.createApp({
            data() {
                return {
                    arr: [],
                    times: ['00', '00', '00', 'xxxx', 'xx', 'xx', 'xxx'],
                    hourdeg: '',
                    mindeg: '',
                    secdeg: '',
                    diskinfo: []
                }
            },
            methods: {
                closeapp() {
                    document.getElementById('app').style.opacity = '0'
                    document.getElementById('app').style.transform = 'scale(.95)'
                    setTimeout(() => {
                        winbase.closewins()
                    }, 500)
                },
                getdata() {
                    winbase.getdata((data) => {
                        if (data.status == 200) {
                            try {
                                this.arr = []
                                setTimeout(() => {
                                    this.arr = JSON.parse(`${data.arr}`.replace(/"/g, '\\"').split('\\"').join('\"'))
                                })
                            } catch (e) {

                            }
                        }
                        setTimeout(() => {
                            this.getdata()
                        }, 5000)
                    })
                },
                toweb(l) {
                    winbase.toweb(l)
                },
                timeset() {
                    requestAnimationFrame(() => {
                        this.times = [
                            new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours(),
                            new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes(),
                            new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds(),
                            new Date().getFullYear(),
                            (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1),
                            new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate(),
                            new Date().getDay() == '1' ? '周一' :
                                new Date().getDay() == '2' ? '周二' :
                                    new Date().getDay() == '3' ? '周三' :
                                        new Date().getDay() == '4' ? '周四' :
                                            new Date().getDay() == '5' ? '周五' :
                                                new Date().getDay() == '6' ? '周六' : '周日'
                        ]
                        this.mindeg = Number(this.times[1]) * (360 / 60)
                        this.hourdeg = Number(this.times[0]) * (360 / 60) * 5 + (30 / 360 * this.mindeg)
                        this.secdeg = Number(this.times[2]) * (360 / 60)
                        this.timeset()
                    })
                }
            },
            mounted() {
                setTimeout(() => {
                    winbase.pageloader('getmainpath', (path, data) => {
                        this.getdata()
                    })
                    winbase.pageloader('getdiskmain', (path, data) => {
                        if (path == 'getdiskmain' && data && data.length) {
                            this.diskinfo = data
                        }
                    })
                })
                //处理时间
                this.timeset()
            }
        })
        app.mount('#app')
    </script>
</body>

</html>